<template>
  <div class="index-container">
    <div class="tab-btn">
      <el-button :type="[chartBox == true? 'primary':'']" @click="tabChange(0)" icon="el-icon-s-data">警令分析</el-button>
      <el-button :type="[chartBox != true? 'primary':'']"  @click="tabChange(1)" icon="el-icon-s-order">警情分析</el-button>
    </div>
    <div class="tab-contents">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-show="chartBox">
          <el-col :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
            <el-row :gutter="20">
              <el-col v-for="(item, index) in iconList" :key="index" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-card class="icon-panel" shadow="never" :style="{ background: item.color }">
                  <div class="numbox">
                    {{ item.num }}
                  </div>
                  <p>{{ item.title }}</p>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
            <el-card class="card" shadow="never">
              <div slot="header">
                <span class="tips">发布趋势</span>
              </div>
              <vab-chart autoresize theme="vab-echarts-theme" :options="linechart1" />
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
            <el-card class="card" shadow="never">
              <div slot="header">
                <span class="tips">部门协同排行</span>
              </div>
              <vab-chart autoresize theme="vab-echarts-theme" :options="cloumchart1" />
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
            <el-card class="cardhs" shadow="never">
              <div slot="header">
                <span class="tips">反馈趋势</span>
              </div>
              <vab-chart autoresize theme="vab-echarts-theme" :options="linechart" />
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
            <el-card class="cardhs" shadow="never">
              <div slot="header">
                <span class="tips">协同状态占比</span>
              </div>
              <vab-chart autoresize theme="vab-echarts-theme" :options="piechart" />
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-card class="cardhs" shadow="never">
              <div slot="header">
                <span class="tips">已反馈进度</span>
              </div>
              <vab-chart autoresize theme="vab-echarts-theme" :options="cloumchart" />
            </el-card>
          </el-col>
        </el-col>



        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-show="!chartBox">
          <el-col :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
            <el-row :gutter="20">
              <el-col v-for="(item, index) in iconListAlarm" :key="index" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-card class="icon-panel" shadow="never" :style="{ background: item.color }">
                  <div class="numbox">
                    {{ item.num }}
                  </div>
                  <p>{{ item.title }}</p>
                </el-card>
              </el-col>
            </el-row>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
            <el-card class="card" shadow="never">
              <div slot="header">
                <span class="tips">发布趋势</span>
              </div>
              <vab-chart autoresize theme="vab-echarts-theme" :options="linechart2" />
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
            <el-card class="card" shadow="never">
              <div slot="header">
                <span class="tips">部门协同排行</span>
              </div>
              <vab-chart autoresize theme="vab-echarts-theme" :options="cloumchart2" />
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
            <el-card class="cardhs" shadow="never">
              <div slot="header">
                <span class="tips">反馈趋势</span>
              </div>
              <vab-chart autoresize theme="vab-echarts-theme" :options="linechart3" />
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
            <el-card class="cardhs" shadow="never">
              <div slot="header">
                <span class="tips">协同状态占比</span>
              </div>
              <vab-chart autoresize theme="vab-echarts-theme" :options="piechart2" />
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-card class="cardhs" shadow="never">
              <div slot="header">
                <span class="tips">已反馈进度</span>
              </div>
              <vab-chart autoresize theme="vab-echarts-theme" :options="cloumchart3" />
            </el-card>
          </el-col>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import VabChart from '@/plugins/echarts'
import {getNum,getAllNumByAlarm,getRankingReport,getRankingReportAlarm,getCoordinationStatusReport,getCoordinationStatusReportAlarm,getFbReport,getFbReportAlarm,getFkReport,getFkReportAlarm,progressFeedback,progressFeedbackAlarm} from '@/api/statistics'
export default {
  name: 'Index',
  components: {
    VabChart,
  },
  data() {
    return {
      chartBox:true,
      timer: 0,
      linechart: {
        tooltip: {
          trigger: 'axis',
          formatter: '<span style="display:inline-block;text-align: left;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#fff"></span>{b}: {c0}条',
          /*formatter:function(value){
              console.log(value);
          },*/
          axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
        },
        grid: {
          top: '2%',
          left: '2%',
          right: '2%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '反馈趋势',
            type: 'line',
            data: [],
            smooth: true,
            areaStyle: {},
          },
        ],
      },
      linechart1: {
        tooltip: {
          trigger: 'axis',
          formatter: '<span style="display:inline-block;text-align: left;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#fff"></span>{b}: {c0}条',
          /*formatter:function(value){
              console.log(value);
          },*/
          axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
        },
        grid: {
          top: '4%',
          left: '2%',
          right: '2%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '发布趋势',
            type: 'line',
            data: [],
            // areaStyle: {normal: {color: rgba(255, 77, 255,0.5)}},
            smooth: true,
            areaStyle: {},
          },
        ],
      },
      linechart2: {
        tooltip: {
          trigger: 'axis',
          formatter: '<span style="display:inline-block;text-align: left;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#fff"></span>{b}: {c0}条',
          /*formatter:function(value){
              console.log(value);
          },*/
          axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
        },
        grid: {
          top: '4%',
          left: '2%',
          right: '2%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '发布趋势',
            type: 'line',
            data: [],
            // areaStyle: {normal: {color: rgba(255, 77, 255,0.5)}},
            smooth: true,
            areaStyle: {},
          },
        ],
      },
      linechart3: {
        tooltip: {
          trigger: 'axis',
          formatter: '<span style="display:inline-block;text-align: left;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#fff"></span>{b}: {c0}条',
          /*formatter:function(value){
              console.log(value);
          },*/
          axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
        },
        grid: {
          top: '4%',
          left: '2%',
          right: '2%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '发布趋势',
            type: 'line',
            data: [],
            // areaStyle: {normal: {color: rgba(255, 77, 255,0.5)}},
            smooth: true,
            areaStyle: {},
          },
        ],
      },
      piechart: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      piechart2: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      cloumchart: {
        color: ['#66b1ff'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          containLabel: true,
          left: 40,
          right: 20,
          top: 40,
          bottom: 0,
        },
        legend: {},
        xAxis: {
          show: false,
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '协同总数',
            type: 'bar',
            barWidth: '20%',
            data: [],
            itemStyle: {
              normal: {
                barBorderRadius: 4,
                color: "#2996de",
                shadowColor: 'rgba(0, 0, 0, 0)',
                shadowBlur: 0,
              }
            },
            barGap: '0%',
            label: {
              normal: {
                show: false,            //显示数字
                position: 'top',       //这里可以自己选择位置
                formatter: function (e) {
                  return e.data + "%"
                }
              }
            }
          }, {
            name: '已协同',
            type: 'bar',
            barWidth: '20%',
            data: [],
            itemStyle: {
              normal: {
                barBorderRadius: 4,
                color: "#f57d2a",
                shadowColor: 'rgba(0, 0, 0, 0)',
                shadowBlur: 0
              }
            },
            label: {
              normal: {
                show: false,            //显示数字
                position: 'top',       //这里可以自己选择位置
                formatter: function (e) {
                  return e.data + "%"
                }
              }
            }
          }
        ]
      },
      cloumchart1: {
        color: ['#66b1ff'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          containLabel: true,
          left: 40,
          right: 20,
          top: 10,
          bottom: 0,
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: [],
        },
        series: [
          {
            data: [],
            type: 'bar',
            // barWidth: '20',
            itemStyle: {
              normal: {
                barBorderRadius: 4,
                /*echart渐变*/
                // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                color: {
                  type: 'linear',
                  x: 1,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0, color: '#26a8e6' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#1ec5af' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                },
                // shadowColor: 'rgba(0, 0, 0, 0.4)',
                // shadowBlur: 20,
              }
            },
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      },
      cloumchart2: {
        color: ['#66b1ff'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          containLabel: true,
          left: 40,
          right: 20,
          top: 10,
          bottom: 0,
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: [],
        },
        series: [
          {
            data: [],
            type: 'bar',
            // barWidth: '20',
            itemStyle: {
              normal: {
                barBorderRadius: 4,
                /*echart渐变*/
                // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                color: {
                  type: 'linear',
                  x: 1,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0, color: '#26a8e6' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#1ec5af' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                },
                // shadowColor: 'rgba(0, 0, 0, 0.4)',
                // shadowBlur: 20,
              }
            },
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      },
      cloumchart3: {
        color: ['#66b1ff'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          containLabel: true,
          left: 40,
          right: 20,
          top: 40,
          bottom: 0,
        },
        legend: {},
        xAxis: {
          show: false,
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '协同总数',
            type: 'bar',
            barWidth: '20%',
            data: [],
            itemStyle: {
              normal: {
                barBorderRadius: 4,
                color: "#2996de",
                shadowColor: 'rgba(0, 0, 0, 0)',
                shadowBlur: 0,
              }
            },
            barGap: '0%',
            label: {
              normal: {
                show: false,            //显示数字
                position: 'top',       //这里可以自己选择位置
                formatter: function (e) {
                  return e.data + "%"
                }
              }
            }
          }, {
            name: '已协同',
            type: 'bar',
            barWidth: '20%',
            data: [],
            itemStyle: {
              normal: {
                barBorderRadius: 4,
                color: "#f57d2a",
                shadowColor: 'rgba(0, 0, 0, 0)',
                shadowBlur: 0
              }
            },
            label: {
              normal: {
                show: false,            //显示数字
                position: 'top',       //这里可以自己选择位置
                formatter: function (e) {
                  return e.data + "%"
                }
              }
            }
          }
        ]
      },
      iconList: [
        {
          icon: 'bars',
          num: '0',
          title: '警令发布总数',
          link: '',
          color: '#ffc069',
        },
        {
          icon: 'bullseye',
          num: '0',
          title: '警令反馈总数',
          link: '',
          color: '#5cdbd3',
        },
        {
          icon: 'book',
          num: '0',
          title: '警令协同总数',
          link: '',
          color: '#69c0ff',
        },
      ],
      iconListAlarm: [
        {
          icon: 'bars',
          num: '0',
          title: '警情发布总数',
          link: '',
          color: '#ffc069',
        },
        {
          icon: 'bullseye',
          num: '0',
          title: '警情反馈总数',
          link: '',
          color: '#5cdbd3',
        },
        {
          icon: 'book',
          num: '0',
          title: '警情协同总数',
          link: '',
          color: '#69c0ff',
        },
      ],
    }
  },
  created() {
    //数量统计警令
    this.getNumStatistics();
    //部门协同排行警令
    this.DeptCollRank();
    //协同状态占比警令
    this.getCoordinationStatusReport();
    //发布趋势警令
    this.getFbReport();
    //反馈趋势警令
    this.getFkReport();
    //已反馈进度警令
    this.progressFeedback();



    //数量统计警情
    this.getNumStatisticsAlarm()
    //部门协同排行警情
    this.DeptCollRankAlarm();
    //协同状态占比警情
    this.getCoordinationStatusReportAlarm();
    //发布趋势警情
    this.getFbReportAlarm();
    //反馈趋势警情
    this.getFkReportAlarm();
    //已反馈进度警令
    this.progressFeedbackAlarm();



  },
  beforeDestroy() {

  },
  mounted() {

  },
  methods: {
    tabChange(val){
      if(val == 0){
        this.chartBox = true
      }else {
        this.chartBox = false;
      }

    },
    //获取数量统计（警令）
    async getNumStatistics() {
      const { data } = await getNum();
      console.log('data',data)
      var list = this.iconList;
      for (var i = 0 ; i < list.length ; i++){
        if (list[i].title === '警令发布总数'){
          list[i].num = data.fbCount;
        }
        if (list[i].title === '警令反馈总数'){
          list[i].num = data.fkCount;
        }
        if (list[i].title === '警令协同总数'){
          list[i].num = data.xtCount;
        }
      }
      this.iconList = list
    },

    //获取数量统计（警情）
    async getNumStatisticsAlarm() {
      const { data } = await getAllNumByAlarm();
      var list = this.iconListAlarm;
      for (var i = 0 ; i < list.length ; i++){
        if (list[i].title === '警情发布总数'){
          list[i].num = data.fbCount;
        }
        if (list[i].title === '警情反馈总数'){
          list[i].num = data.fkCount;
        }
        if (list[i].title === '警情协同总数'){
          list[i].num = data.xtCount;
        }
      }
      this.iconListAlarm = list
    },

    //部门协同排行（警令）
    async DeptCollRank(){
      const { data } = await getRankingReport();
      this.cloumchart1.yAxis.data = data.xData;
      this.cloumchart1.series[0].data =  data.yData;
    },
    //部门协同排行（警情）
    async DeptCollRankAlarm(){
      const { data } = await getRankingReportAlarm();
      this.cloumchart2.yAxis.data = data.xData;
      this.cloumchart2.series[0].data =  data.yData;
    },

    //协同状态占比（警令）
    async getCoordinationStatusReport(){
      const { data } = await getCoordinationStatusReport();

      var list = data.data;
      for(var i = 0; i < list.length; i++){
        if ( list[i].name === '0'){
          list[i].name = '反馈中';
        }else if ( list[i].name === '1'){
          list[i].name = '待督察';
        }else {
          list[i].name = '督察通过';
        }
      }
      this.piechart.series[0].data = list;
    },

    //协同状态占比（警情）
    async getCoordinationStatusReportAlarm(){
      const { data } = await getCoordinationStatusReportAlarm();

      var list = data.data;
      for(var i = 0; i < list.length; i++){
        if ( list[i].name === '0'){
          list[i].name = '反馈中';
        }else if ( list[i].name === '1'){
          list[i].name = '待督察';
        }else {
          list[i].name = '督察通过';
        }
      }
      this.piechart2.series[0].data = list;
    },
    //发布趋势（警令）
    async getFbReport(){
      const { data } = await getFbReport();
      this.linechart1.xAxis[0].data = data.xData;
      this.linechart1.series[0].data = data.yData;
    },
    //发布趋势（警情）
    async getFbReportAlarm(){
      const { data } = await getFbReportAlarm();
      this.linechart2.xAxis[0].data = data.xData;
      this.linechart2.series[0].data = data.yData;
    },
    //反馈趋势（警令）
    async getFkReport(){
      const { data } = await getFkReport();
      this.linechart.xAxis[0].data = data.xData;
      this.linechart.series[0].data = data.yData;
    },
    //反馈趋势（警情）
    async getFkReportAlarm(){
      const { data } = await getFkReportAlarm();
      this.linechart3.xAxis[0].data = data.xData;
      this.linechart3.series[0].data = data.yData;
    },
    //已反馈进度（警令）
    async progressFeedback(){
      const { data } = await progressFeedback();
      console.log('data',data)
      this.cloumchart.xAxis.data = data.xData;
      this.cloumchart.series[0].data = data.yData1;
      this.cloumchart.series[1].data = data.yData2;
    },
    //已反馈进度（警令）
    async progressFeedbackAlarm(){
      const { data } = await progressFeedbackAlarm();
      console.log('data',data)
      this.cloumchart3.xAxis.data = data.xData;
      this.cloumchart3.series[0].data = data.yData1;
      this.cloumchart3.series[1].data = data.yData2;
    }

  },
}
</script>
<style lang="scss" scoped>
.index-container {
  padding: 0 !important;
  margin: 0 !important;
  background: #f5f7f8 !important;

  .icon-panel {
    height: 100px;
    text-align: center;
    color: #fff;

    ::v-deep {
      .el-card__body {
        padding: 10px 5px;
      }
    }

    .numbox {
      font-size: 40px;
      position: relative;
      font-weight: bold;
    }

    svg {
      padding-top: 20px;
      font-size: 40px;
      width: 60px;
    }

    p {
      margin-top: 10px;
    }
  }

  ::v-deep {
    .el-alert {
      padding: $base-padding;

      &--info.is-light {
        min-height: 82px;
        padding: $base-padding;
        margin-bottom: 15px;
        color: #909399;
        background-color: $base-color-white;
        border: 1px solid #ebeef5;
      }
    }

    .el-card__body {
      height: calc(100% - 90px);

      .echarts {
        width: 100%;
        height: 100%;
      }
    }
  }

  .card {
    height: 335px;
  }

  .cardhs {
    height: 500px;
  }

  .bottom {
    padding-top: 20px;
    margin-top: 5px;
    color: #595959;
    text-align: left;
    border-top: 1px solid $base-border-color;
  }

  .table {
    width: 100%;
    color: #666;
    border-collapse: collapse;
    background-color: #fff;

    td {
      position: relative;
      min-height: 20px;
      padding: 9px 15px;
      font-size: 14px;
      line-height: 20px;
      border: 1px solid #e6e6e6;

      &:nth-child(odd) {
        width: 20%;
        text-align: right;
        background-color: #f7f7f7;
      }
    }
  }

  .bottom-btn {
    button {
      margin: 5px 10px 15px 0;
    }
  }
}
.tab-btn{
  padding: 20px 0 0;
  background-color: #fff;
  text-align: center;
}
.tab-contents{
  height: calc(100vh - 250px);
  padding: 20px;
  background-color: #fff;
  overflow-y: scroll;
}
</style>